<template>
  <el-container class="big">
    <!-- 头部区域 -->
    <el-header>
      <div class="head-left">
        <img src="../assets/touxiang.jpg" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button @click="logout">退出</el-button>
    </el-header>
    <!-- 主体区域 -->
    <el-container>
      <!-- 左侧 -->
      <el-aside :width="iscollapsed ? '64px' : '200px'">
        <div class="ick" @click="ick">☰</div>
        <!-- 左侧导航栏 -->
        <el-menu background-color="#fdfefd" text-color="#333" active-text-color="#20a0ff" unique-opened
          :collapse="iscollapsed" :collapse-transition="false" router>
          <el-submenu :index="item.id + ''" v-for="item in menus" :key="item.id" :default-active="activeIndex">
            <!-- 一级菜单 -->
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="'/' + itm.path" v-for="itm in item.children" :key="itm.id" @cklick="save()">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ itm.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Collapse } from 'element-ui';
export default {
  name: 'WorkspaceJsonHome',

  data () {
    return {
      menus: [],//菜单数据
      iscollapsed: false,
      activeIndex: '',//被激活的地址
    };
  },
  created () {
    this.getMenus();
    this.activeIndex = window.sessionStorage.getItem('activeIndex');
  },

  mounted () {

  },

  methods: {
    logout () {
      window.sessionStorage.clear();//清空token
      this.$router.push('/login');//并回到登录界面
    },

    async getMenus () {
      await this.$http.get('menus').then(res => {
        if (res.data.meta.status !== 200) return this.$message.error('获取菜单失败');
        this.menus = res.data.data;
        console.log(this.menus);
      });
    },
    ick () {
      this.iscollapsed = !this.iscollapsed
    },
    //其他
    save (activeIndex) {
      window.sessionStorage.setItem('activeIndex', activeIndex)
      this.activeIndex = activeIndex
    },

  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #000000fe;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

.el-menu {
  border: none
}

.el-main {
  background-color: #eceff4;
  ;
}

.ick {

  line-height: 24px;
  text-align: center;
  cursor: pointer;
  background-color: #cfe5ef;
}



.big {
  height: 100%;

  .head-left {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-family: '微软雅黑';
    font-weight: 500;
    color: aliceblue;
    text-shadow: 1px 1px 0.5px #cfe5ef;


    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      border-radius: 1%;
    }
  }

  .el-button {
    background-color: #000000fe;
    border: none;
    color: aliceblue;
    font-weight: 600;

  }

}
</style>